import React from "react";
import ReactDOM from "react-dom";
import './index.css';

/* Conditional Rendering */
/* 条件渲染 */

// 在React中, 你可以创建不同的组件来封装各种你需要的行为. 依据应用的不同状态, 你可以只渲染对应状态下的部分内容
// 使用if或条件运算符区创建元素来表现当前的状态, 然后让react根据他们更新UI

// 示例 - 根据用户是否登录决定显示组件
function UserGreeting(props) {
    return <h1>Welcome back, user!</h1>;
}
function GuestGreeting(props) {
    return <h1>Please sign up, guest.</h1>
}
function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}
// 使用变量来储存元素, 帮助你有条件的渲染组件的一部分
function LoginButton(props) {
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    );
}
function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    );
}
// 创建LoginControl组件, 有状态state, 根据当前的状态渲染Button和Greeting
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isLoggedIn: false }; // 初始化状态
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
    }
    handleLoginClick() {
        this.setState({ isLoggedIn: true });
    }
    handleLogoutClick() {
        this.setState({ isLoggedIn: false });
    }
    /* render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button; // 储存两个按钮
        if (isLoggedIn)
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        else
            button = <LoginButton onClick={this.handleLoginClick} />;
        return (
            <div>
                <Greeting isLoggedIn={isLoggedIn} />
                {button}
            </div>
        );
    } */
    // 内联条件渲染更简洁的语法 - (三目运算符) condition ? true : false
    render() {
        const isLoggedIn = this.state.isLoggedIn;
        return (
            <div>
                {isLoggedIn
                    ? <LogoutButton onClick={this.handleLogoutClick} />
                    : <LoginButton onClick={this.handleLoginClick} />
                }
            </div>
        );
    }
}

// 内联条件渲染更简洁的语法2 - &&
// 原理: JS 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false
// 示例 - 未读邮件效果
function Mailbox(props) {
    const unreadMsg = props.unreadMsg;
    return (
        <div>
            <h1>使用 && </h1>
            {unreadMsg.length > 0 &&
                <h2>You have {unreadMsg.length} unread messages</h2>
            }
        </div>
    );
}

const messages = ['react', 'is', 'interesting'];

ReactDOM.render(
    // <Greeting  isLoggedIn={true} />,
    // <LoginControl />,
    <Mailbox unreadMsg={messages} />,
    document.getElementById('root')
);